<script setup>
import city from '@/composables/city.js'
defineProps({
  modelValue: String
})
const userStore = useAppStore()


const formatCityData = list => {
  const cityList = {}
  // 1 遍历list数组
  list.forEach(item => {
    // 2 获取每一个城市的首字母
    const first = item.pinyin.substr(0, 1)
    // 3 判断 cityList 中是否有该分类
    if (cityList[first]) {
      // 4 如果有，直接往该分类中push数据
      // cityList[first] => [{}, {}]
      cityList[first].push(item)
    } else {
      // 5 如果没有，就先创建一个数组，然后，把当前城市信息添加到数组中
      cityList[first] = [item]
    }
  })

  // 获取索引数据
  const cityIndex = Object.keys(cityList).sort()

  return {
    cityList,
    cityIndex
  }
}

const { cityList, cityIndex } = formatCityData(city)

// import orderCity from '@/composables/orderCity.json'
// console.log(orderCity.A)


const emit = defineEmits(["update:modelValue"])

const tapCityItem = (i) => {
  emit("update:modelValue", i.name)
}


const visible = ref(false)

</script>

<template>
  <el-popover :visible="visible" placement="bottom-start" :width="userStore.pattern == 'Mobile' ? 350 : 806"
    trigger="click" popper-style="padding:24px;border-radius: 8px;max-height:480px;overflow-y: auto;">

    <div class="flex" v-for="(item) in cityIndex" :key="item">
      <div class="w-[58px] min-w-[58px] font-semibold" style="color: var(--pro-admin-layout-content-bg);">{{ item }}</div>
      <div class="flex gap-[14px] flex-wrap mb-[14px]">
        <div :style="modelValue === i.name ? 'color:#0080FF' : ''" @click="tapCityItem(i), visible = !visible"
          class=" mb-[5px] cursor-pointer xwxs:(w-[29%]) xwmd:(w-[18.2%])" v-for="i in cityList[item]" :key="i.zip">{{
            i.name }}</div>
      </div>
    </div>



    <template #reference>
      <div @click="visible = !visible" class="p-[16px] flex items-center rounded-[8px] cursor-pointer"
        style="background-color: #EEF1FF;">
        <div class="min-w-[92px] mr-[28px]">{{ modelValue }}</div>
        <img class="w-[8px] h-[6px]" src="@/assets/talentRecruitment/xia.png" alt="">
      </div>
    </template>
  </el-popover>
</template>

<style  scoped></style>
